//utilities scss
//提供一些公共的经常用到的样式

//清除浮动样式
.clearfix {
  @include clearfix;
}

//水平居中样式
.center-block {
  @extend %margin-center;
}

.right {
  float: right !important;
}

.left {
  float: left !important;
}

.hide {
  display: none !important;
}
.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

//固定定位
// .affix {
//   @extend %fixed;
// }

.relative{
  @extend %relative;
}

//margin-right:0
.mr0{
    margin-right:0 !important;
}
//margin-left:10px;
.ml10{
  margin-left:$size10;
}
//margin-left:20px;
.ml20{
  margin-left:$size20;
}
//margin-top:0;
.mt0{
    margin-top:0 !important;
}
//margin-top:10px;
.mt10{
    margin-top:$size10 !important;
}
//margin-top:20px;
.mt20{
    margin-top:$size20 !important;
}
//margin-top:60px;
.mt60{
    margin-top:$fs60 !important;
}
//margin-bottom:20px
.mb20{
  margin-bottom:$size20 !important;
}
//padding-left:30px;padding-right:30px;
.plr30{
  padding-left:0.4rem;  //30px
  padding-right:0.4rem;
}


//background-color:$colorWhite;
.bg-white{
   background-color:$colorWhite !important;
}

//text-align:left
.text-left{
  text-align:left !important;
}

//两端对齐
.justify-align{
  text-align:justify;
}

//垂直居中
.vertical-middle{
  @extend %inline-block;
  vertical-align:middle;
}